<template>
  <div class="layer font-semibold text-sm" v-if="main.checkActLayer">
    <van-overlay :show="main.checkActLayer" :lock-scroll="false" z-index="100">
      <div class="wrapper" @click.stop>
        <div class="bg-[#213744] text-white rounded-lg max-w-[413px] w-full">
          <div
            class="fle justify-center items-center relative p-4 border-b border-gray-700"
          >
            <p class="text-lg text-center">{{ $t("layer.checkin.daily") }}</p>
            <button
              class="text-gray-400 hover:text-gray-200 absolute right-4 top-5"
            >
              <van-icon
                @click="closeLayer"
                class="cursor-pointer"
                name="cross"
              />
            </button>
          </div>
          <!-- 内容 -->
          <div
            class="p-[0] md:p-[30px] py-[18px] flex flex-wrap justify-between"
          >
            <div v-for="item in daysList" :key="item.day">
              <div
                class="w-[83px] h-[117px] rounded-lg relative mb-[12px]"
                :class="item.day != 7 ? 'bg1' : 'bg2'"
                :style="item.day != 7 ? 'width:83px;' : 'width:170px;'"
              >
                <img
                  class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[46px] h-[36px]"
                  v-if="item.day == 1 || item.day == 2 || item.day == 3"
                  :src="coins1"
                  alt=""
                />
                <img
                  class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[48px] h-[48px]"
                  v-else-if="item.day == 4 || item.day == 5 || item.day == 6"
                  :src="coins2"
                  alt=""
                />
                <img
                  class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[73px] h-[50px]"
                  v-else
                  :src="coins3"
                  alt=""
                />
                <!-- 天数 -->
                <p
                  class="text-[#b55529] absolute text-sm top-[2px]"
                  :class="item.day != 7 ? 'left-[8px]' : 'left-[28px]'"
                >
                  {{ item.day }}{{ $t("layer.checkin.day") }}
                </p>
                <!-- 金币数 -->
                <p
                  class="text-white absolute text-sm bottom-[4px] left-1/2 -translate-x-1/2"
                >
                  +{{ item.bonus }}
                </p>
                <div
                  v-if="item.is_sign == 1"
                  class="w-full h-full absolute top-0 left-0 opacity-60 bg-black rounded-lg"
                ></div>
                <svg-icon
                  v-if="item.is_sign == 1"
                  class="text-[32px] absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
                  name="领取"
                ></svg-icon>
              </div>
            </div>
          </div>
          <!-- 按钮 -->
          <div class="flex justify-between px-[30px]">
            <div
              @click="goToWallet"
              class="bg-[#2f4553] md:w-[175px] px-4 md:px-8 leading-[40px] h-[40px] cursor-pointer text-white text-center text-sm rounded"
            >
              {{ $t("layer.checkin.more") }}
            </div>
            <div
              v-if="remain_at > 0"
              class="bg-[#2f4553] md:w-[175px] px-4 md:px-8 leading-[40px] h-[40px] cursor-pointer text-white text-center text-sm rounded"
            >
              <!-- {{ remain_at }} -->
              <countdown-timer
                :duration="remain_at"
                @endTimeClear="remain_at = 0"
              ></countdown-timer>
            </div>
            <div
              v-else
              @click="userCheck"
              class="bg-[#1475e1] hover:bg-[#105eb4] md:w-[175px] px-4 md:px-8 leading-[40px] h-[40px] cursor-pointer text-white text-center text-sm rounded"
            >
              {{ $t("layer.register.get") }} {{ currentGold }}
              {{ $t("layer.register.gold") }}
            </div>
          </div>
          <!-- 页脚 -->
          <p class="text-[#a1abc3] my-[18px] text-center px-[30px]">
            {{ $t("layer.checkin.Upgrading") }}
          </p>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script setup>
import {
  ref,
  onMounted,
  onBeforeUnmount,
  watch,
  computed,
  getCurrentInstance
} from "vue";
import { useRouter } from "vue-router";
import { activeSignview, activeSign } from "../../api/active.js";
import { mainAct } from "@/store/activeda";
import { mainWallet } from "@/store/wallet";
import coins1 from "../../assets/checkin/j.png";
import coins2 from "../../assets/checkin/j2.png";
import coins3 from "../../assets/checkin/j3.png";
import bg1 from "../../assets/checkin/d2.png";
import bg2 from "../../assets/checkin/d3.png";
import countdownTimer from "./countdown-timer.vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const main = mainAct();
const main2 = mainWallet();
const router = useRouter();
const currentGold = ref(null);
const daysList = ref([
  {
    day: 1,
    bonus: 100,
    is_sign: 0
  },
  {
    day: 2,
    bonus: 200,
    is_sign: 0
  },
  {
    day: 3,
    bonus: 300,
    is_sign: 0
  },
  {
    day: 4,
    bonus: 400,
    is_sign: 0
  },
  {
    day: 5,
    bonus: 500,
    is_sign: 0
  },
  {
    day: 6,
    bonus: 600,
    is_sign: 0
  },
  {
    day: 7,
    bonus: 700,
    is_sign: 0
  }
]);
const emit = defineEmits(["openWallet"]);
const goToWallet = () => {
  main.checkActLayer = false;

  emit("openWallet");
};
const {
  appContext: {
    config: { globalProperties }
  }
} = getCurrentInstance();
const closeLayer = () => {
  main.checkActLayer = false;
};
const findLast = (array, predicate) => {
  let index = array.length;
  while (index--) {
    if (predicate(array[index])) {
      return array[index];
    }
  }
  return undefined;
};
const userCheck = async () => {
  let res = await activeSign();
  if (res.errno == 0) {
    ElNotification({
      position: "top-left",
      zIndex: 1004,
      message: t("layer.checkin.scuccecGoodl"),
      type: "success"
    });
    // await main2.getBalanceNumll();
    closeLayer();
    getList();
  }
};

const remain_at = ref(0);
const getList = async () => {
  let res = await activeSignview();
  // console.log(res);
  if (res.errno == 0 && res.data.list.length != 0) {
    console.log("显示签到");
    main.showCheckIcon = true;
    daysList.value = res.data.list;
    const lastIndex = daysList.value.length - 1;
    const lastSignItem = daysList.value.findLast(item => item.is_sign === 1);

    if (lastSignItem) {
      const nextIndex = daysList.value.indexOf(lastSignItem) + 1;
      if (nextIndex < lastIndex && daysList.value[nextIndex].is_sign === 0) {
        // 如果最后一个is_sign为1的项后面紧跟着is_sign为0的项，返回该项的bonus
        // console.log(daysList.value[nextIndex].bonus);
        currentGold.value = daysList.value[nextIndex].bonus;
      } else {
        // 如果没有is_sign为0的项，或者最后一个is_sign为1的项是数组的最后一个元素，返回数组第一项的bonus
        // console.log(daysList.value[0].bonus);
      }
    } else {
      currentGold.value = daysList.value[0].bonus;
      // console.log(daysList.value[0].bonus);
    }
  } else {
    console.log("不显示签到");
    main.showCheckIcon = false;
  }
  remain_at.value = res.data.remain_at;
};
onMounted(() => {
  if (main.isLogin) {
    //执行onmounted请求
    getList();
  }

  console.log("main.checkActLayer", main.checkActLayer);
});
watch(
  () => main.isLogin,
  () => {
    if (main.isLogin) {
      //执行onmounted请求
      getList();
    } else {
      remain_at.value = 0;
    }
  }
);

watch(
  () => main.checkActLayer,
  () => {
    if (main.checkActLayer) {
      document.body.style.overflow = "hidden";
      getList();
    } else {
      document.body.style.overflow = "";
    }
  },
  { deep: true }
);

onBeforeUnmount(() => {});
</script>
<style scoped lang="less">
@media (min-width: 600px) {
}
.layer {
  // width: 375px;
  /*width: 100%;*/
  /*height: 100%;*/
  background-color: #0f212e;
  color: #b1bad3;
  position: relative;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.tab-active {
  background-color: #2f4553;
  color: #fff;
}
.tab-inactive {
  color: #fff;
}
.bg1 {
  background-image: url("../../assets/checkin/d2.png");
  background-size: 100% 100%;
}
.bg2 {
  background-image: url("../../assets/checkin/d3.png");
  background-size: 100% 100%;
}
</style>
